<template>
    <div>
        <div>firstName:<span>{{firstName}}</span></div>
        <div>middleName:<span>{{middleName}}</span></div>
        <div>lastName:<span>{{lastName}}</span></div>
        <div>fullName:<span>{{name}}</span></div>
        <button @click="name='zhang san feng'">changeFullName</button>
    </div>
</template>

<script>
export default {
  data(){
    return{
      firstName:'zhai',
      middleName:'ji',
      lastName:'zhe'
    }
  },
  computed:{
    name:{
      get(){
        return this.firstName+" "+this.middleName+" "+this.lastName
      },
      set(val){
        //计算属性是不能改的
        console.log('val',val);
        this.firstName=val.split(" ")[0]
        this.middleName=val.split(" ")[1]
        this.lastName=val.split(" ")[2]
      }
    }
  }
}
</script>

<style lang="scss">
  div{
    span{
      color: blue;
    }
  }
</style>